<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="copyright" content="职教招生网">
<meta name="author" content="职教招生网">
<title>职教招生网</title>
<link rel="stylesheet" href="static/css/lib/vant.css">
<script src="./static/js/basic.js"></script>
<script src="./static/js/lib/vant.js"></script>
<script src="./static/js/component.js" defer></script>
<script src="./static/js/nav.js"></script>
</head>

<body>
  <div v-cloak class="main zxb-home" id="app">
    
    <layout :header="true">
      <div id="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banner" :key="index"><img :src="item.image" class="img" alt="" /></van-swipe-item>
        </van-swipe>
        <van-swipe v-if="banner_nav.length > 0" class="banner-nav box" :loop="false" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(items, index) in banner_nav" :key="index" class="flex-lect item-box">
            <div v-for="(item, j) in items" :key="j" class="item">
              <img :src="item.image" class="ico" alt="" />
              <div class="name">{{item.name}}</div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="home-m2 box">
        <img src="./static/image/home/m2-ico.png" class="logos" alt="" />
        <a href="javascript:;" class="refresh">
          <img src="./static/image/home/m2-more.png" class="ico" alt="" />
          <p>换一换</p>
        </a>
        <div class="con">
          <div class="tit">2024年春季特色专业招生优势解析</div>
          <dl class="list">
            <dd class="item" v-for="(item, index) in m2">
              <a href="javascript:;" class="flex-lect a">{{item.intro}}</a>
            </dd>
          </dl>
        </div>
      </div>
      <div class="home-m3 box" v-if="m3.length > 0">
        <div class="m3-box" :class="'m3-box'+m3_cur">
          <div class="flex-bect top">
            <dl class="flex-lect tab">
              <dd v-for="(items, i) in m3" :key="i" class="item flex-ct" :class="['item'+i, m3_cur === i ? 'on': '']" @click="m3_cur = i">{{items.name}}</dd>
            </dl>
            <div class="div">
              <div class="tit flex-lect">
                <img :src="m3[m3_cur].image" alt="" class="ico">
                <b>{{m3[m3_cur].tip}}</b>
              </div>
              <div class="intro flex-ct">{{m3[m3_cur].intro}}</div>
            </div>
            
          </div>
          <div class="list">
            <a v-for="(item, j) in m3[m3_cur].list" :key="j" href="javascript:;" class="item flex-bect">
              <div class="text flex1">
                <div class="name row1">{{item.name}}</div>
                <div class="intro row1">{{item.intro}}</div>
              </div>
              <div class="btn flex-ct">咨询</div>
            </a>
          </div>
        </div>
      </div>
      <div class="home-m4">
        <div class="flex-bect box">
          <div class="home-tit">专区选择方向</div>
          <div class="dot">{{m4_cur}}/{{m4.length}}</div>
        </div>
        <van-swipe v-if="m4.length > 0" class="m4-ban" :autoplay="3000" indicator-color="white" @change="m4_ban">
          <van-swipe-item v-for="(item, index) in m4" :key="index">
            <div class="item" :class="'item'+index">
              <img :src="item.image" class="ico" alt="" />
              <div class="name">{{item.name}}</div>
              <div class="intro" v-html="item.intro"></div>
              <a href="javascript:;" class="btn flex-ct" :class="'btn'+index">立即查看</a>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      
      <div class="home-m5 box" :class="'m5-box'+m5_cur">
        <div class="home-tit">热门专业招生专区</div>
        <div class="con" v-if="m5.length > 0">
          <div class="tab flex-bect">
            <span v-for="(item, index) in m5" :key="index" class="item flex-ct" :class="{on: m5_cur === index}" @click="m5_cur = index">{{item.name}}</span>
          </div>
          <div v-if="m5_cur === 0 || m5_cur === 1">
            <div class="intro">{{m5[m5_cur].intro}} <a href="" class="red">[查看详情]</a></div>
            <div class="flex-bect bottom">
              <div class="w list-btn">
                <div class="tit">高校推荐</div>
                <a v-for="(item, index) in m5[m5_cur].school" :key="index" class="item flex-ct" href="">{{item.name}}</a>
              </div>
              <div class="w imgs">
                <div class="tit">就业前景</div>
                <img :src="m5[m5_cur].qj" alt="" />
              </div>
            </div>
          </div>
          <div v-else>
            <van-swipe v-if="m5[m5_cur].list.length > 0" class="m5-ban" :autoplay="3000" :loop="false" indicator-color="#2A7CF3">
              <van-swipe-item v-for="(item, index) in m5[m5_cur].list" :key="index">
                <div class="name" v-html="item.name"></div>
                <div class="intro">{{item.intro}}<a href="" class="red">[查看详情]</a></div>
                <div class="flex-bect bottom">
                  <div v-for="(items, j) in item.school" :key="j" class="w list-btn">
                    <div class="tit">推荐院校</div>
                    <a v-for="(itemd, index) in items" :key="index" class="item flex-ct" href="">{{itemd.name}}</a>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
          </div>
          
        </div>
        
      </div>
      <div class="home-m6 box">
        <div class="home-tit">没有选择的专业？看看榜单</div>
        <div class="flex-bect con">
          <div class="w1">
            <div class="tit">热门专业<br>榜单</div>
            <div class="more flex-ct">更多专业 <img src="./static/image/home/m6-more.png" class="ico" alt=""></div>
          </div>
          <dl class="w2">
            <dd v-for="(item, index) in m6" :key="index" class="item" :class="'item'+index">
              <div class="name">{{item.name}}</div>
              <a href="" class="more">咨询</a>
            </dd>
          </dl>
        </div>
      </div>
      <div class="home-m7">
        <div class="home-tit flex-bect">
          <span class="nam">海量问答，大咖讲师，专业解答</span>
          <i class="more flex-ct">备考答疑</i>
        </div>
        <div class="tab">
          <span v-for="(item, index) in m7" :key="index" class="item" :class="{on: index == m7_cur}" @click="m7_cur = index">{{item.name}}</span>
        </div>
        <div class="con" v-if="m7.length > 0">
          
          <div class="top">
            <span class="btn">专业动态</span>
            <span class="more"><img src="./static/image/home/m7-view.png" class="ico" alt="" />{{m7[m7_cur].view}}</span>
          </div>
          <dl class="list">
            <dd v-for="(item, index) in m7[m7_cur].list" :key="index" class="item flex-bect">
              <div class="name row1">{{item.intro}}</div>
              <span class="more flex-ct">咨询</span>
            </dd>
          </dl>
        </div>
      </div>
      <school-module></school-module>
      <form-module></form-module>
      <div class="home-pup-box">
        <van-popup v-model="show" class="home-pup">
          <div class="div">
            <img src="./static/image/pup.png" class="imgs" alt="" />
            <span class="close" @click="show = false"></span>
          </div>
        </van-popup>
      </div>
      
    </layout>
  </div>

  <script type="text/babel">
    // var path = path();
    let path = {
      xqjy:'01xqjy.html',
      gsgl:'02gsgl.html',
      gyjqr:'03gyjqr.html',
      jjgl:'04jjgl.html',
      it:'05it.html',
      rjgc:'06rjgc.html',
      yyhl:'07yyhl.html',
      yinszy:'08yszy.html',
      art:'09art.html',
      kjzy:'10kjzy.html',
      yyfl:'11yyfl.html',
      jxgc:'12jxgc.html',
      jylx:'13jylx.html',
      tsyx:'14tsyx.html',
      gsyx:'15gsyx.html',
      ksbm:'16ksbm.html',
      lqcx:'17lqcx.html',
      xxcx:'18xxcx.html',
      shzs:'19shzs.html',
      zycs:'20zycs.html',
    }
    new Vue({
      el: '#app',
      data: {
        show:false,
        path:{},
        banner:[
          {id:1, image:'./static/image/home/banner1.png'},
          {id:2, image:'./static/image/home/banner2.png'},
          {id:3, image:'./static/image/home/banner3.png'},
          {id:4, image:'./static/image/home/banner4.png'},
          {id:5, image:'./static/image/home/banner5.png'},
          {id:6, image:'./static/image/home/banner6.png'},
          {id:7, image:'./static/image/home/banner7.png'},
          {id:8, image:'./static/image/home/banner8.png'},
          {id:9, image:'./static/image/home/banner9.png'},
          {id:10, image:'./static/image/home/banner10.png'}
        ],
        banner_nav:[
          [
            {id:1, name:'学前教育', image:'./static/image/home/m1-ico1.png', path:path.xqjy},
            {id:2, name:'工商管理', image:'./static/image/home/m1-ico2.png', path:path.gsgl},
            {id:3, name:'工业机器人', image:'./static/image/home/m1-ico3.png', path:path.gyjqr},
            {id:4, name:'经济管理', image:'./static/image/home/m1-ico4.png', path:path.jjgl},
            {id:5, name:'IT/计算机', image:'./static/image/home/m1-ico5.png', path:path.it},
            {id:6, name:'软件工程', image:'./static/image/home/m1-ico6.png', path:path.yjgc},
            {id:1, name:'医院护理', image:'./static/image/home/m1-ico1.png', path:path.yyhl},
            {id:8, name:'影视专业', image:'./static/image/home/m1-ico8.png', path:path.yinszy},
            {id:9, name:'艺术专业', image:'./static/image/home/m1-ico9.png', path:path.art},
            {id:10, name:'会计专业', image:'./static/image/home/m1-ico10.png', path:path.kjzy},
          ],
          [
            {id:11, name:'语言法律', image:'./static/image/home/m1-ico11.png', path:path.yyfl},
            {id:12, name:'机械工程', image:'./static/image/home/m1-ico12.png', path:path.jxgc},
            {id:13, name:'教育理学', image:'./static/image/home/m1-ico13.png', path:path.jylx},
            {id:14, name:'特色院校', image:'./static/image/home/m1-ico14.png', path:path.tsyx},
            {id:15, name:'各省院校', image:'./static/image/home/m1-ico15.png', path:path.gsyx},
            {id:16, name:'快速报名', image:'./static/image/home/m1-ico16.png', path:path.ksbm},
            {id:17, name:'录取查询', image:'./static/image/home/m1-ico17.png', path:path.lqcx},
            {id:18, name:'学校查询', image:'./static/image/home/m1-ico18.png', path:path.xxcx},
            {id:19, name:'所获证书', image:'./static/image/home/m1-ico19.png', path:path.shzs},
            {id:20, name:'职业测试', image:'./static/image/home/m1-ico20.png', path:path.zycs},
          ]
        ],
        m2:[],
        m3:[],
        m3_cur:0,
        m4:[],
        m4_cur:1,
        m5:[],
        m5_cur:0,
        m6:[],
        m7:[],
        m7_cur:0,
      },
      mounted() {
        setTimeout(()=>{
          this.show = true
        },1000)
        this.getMain2();
        this.getMain3();
        this.getMain4();
        this.getMain5();
        this.getMain6();
        this.getMain7();
      },
      methods:{
        
        getMain7(){
          this.m7 = [
            {
              id:1, name:'工业机器人', view:'1023',
              list:[
                {id:1, intro:'工业智能机器人就业前景怎么样？'},
                {id:2, intro:'什么是工业智能机器人'},
                {id:3, intro:'学生成绩不好能学的会吗？'},
                {id:4, intro:'没有参加高考，可以学这个专业吗？'}
              ]
            },
            {
              id:2, name:'艺术专业', view:'10223',
              list:[
                {id:2, intro:'什么是工业智能机器人'},
                {id:4, intro:'没有参加高考，可以学这个专业吗？'},
                {id:1, intro:'工业智能机器人就业前景怎么样？'},
                {id:3, intro:'学生成绩不好能学的会吗？'},
              ]
            },
            {
              id:3, name:'IT/计算机', view:'103',
              list:[
                {id:1, intro:'工业智能机器人就业前景怎么样？'},
                {id:3, intro:'学生成绩不好能学的会吗？'},
                {id:2, intro:'什么是工业智能机器人'},
                {id:4, intro:'没有参加高考，可以学这个专业吗？'}
              ]
            },
            {
              id:4, name:'软件工程', view:'123',
              list:[
                {id:2, intro:'什么是工业智能机器人'},
                {id:3, intro:'学生成绩不好能学的会吗？'},
                {id:1, intro:'工业智能机器人就业前景怎么样？'},
                {id:4, intro:'没有参加高考，可以学这个专业吗？'}
              ]
            },
            {id:5, name:'会计专业', view:'1023',
              list:[
                {id:1, intro:'工业智能机器人就业前景怎么样？'},
                {id:2, intro:'什么是工业智能机器人'},
                {id:3, intro:'学生成绩不好能学的会吗？'},
                {id:4, intro:'没有参加高考，可以学这个专业吗？'}
              ]
            }
          ]
        },
        getMain6(){
          this.m6 = [
            {id:1, name:'工业智能机器人'},
            {id:2, name:'学期教育'},
            {id:3, name:'工商管理'},
            {id:4, name:'IT/计算机'},
            {id:5, name:'语言法律'}
          ]
        },
        getMain5(){
          this.m5 = [
            {
              name:'互联网金融', 
              intro:'自互联网金融元年以来，余额宝推出不足一年已达到5000亿规模，随后互联网巨头、传统银行的各类理财产品不断涌现；P2P、众筹、互联网银行平台等各种模式争相斗艳；而对复合型人才的需求急增，要求不仅要懂互联网，更要懂金融。与传统金融行业人才供需两旺的情况不同，新兴互联网金融行业的人才供给根本无法满足企业需求。据统计，截至2015年10月，互联网金融人才需求同比增幅超过41%。未来三年内，P2P网贷平台的人才缺口将达142万，再加上互联网金融其它六种业态的人才缺乏，',
              school:[{id:1, name:'哈尔滨工程大学继教院 '},{id:2, name:'辽宁师范大学海华学院 '}],
              qj:'./static/image/home/m5.png'
            },
            {
              name:'工业机器人', 
              intro:'而对复合型人才的需求急增，要求不仅要懂互联网，更要懂金融。与传统金融行业人才供需两旺的情况不同，新兴互联网金融行业的人才供给根本无法满足企业需求。据统计，截至2015年10月，互联网金融人才需求同比增幅超过41%。未来三年内，P2P网贷平台的人才缺口将达142万，再加上互联网金融其它六种业态的人才缺乏，自互联网金融元年以来，余额宝推出不足一年已达到5000亿规模，随后互联网巨头、传统银行的各类理财产品不断涌现；P2P、众筹、互联网银行平台等各种模式争相斗艳；',
              school:[{id:2, name:'辽宁师范大学海华学院 '},{id:1, name:'哈尔滨工程大学继教院 '}],
              qj:'./static/image/home/m5.png'
            },
            {
              name:'高薪专区',
              list:[
                {
                  name:'<span class="red">网络安全</span>专业',
                  intro:'截至2020年3月，我国网民规模为9.04亿，互联网普及率达64.5%。与此同时，互联网的开放性和安全漏洞带来的风险也无处不在。网络攻击行为日趋复杂；黑客攻击行为组织性更强；针对手机无线终端的网络攻击日趋严重.... ',
                  school:[
                    [{id:1, name:'哈尔滨工程大学继教院 '},{id:2, name:'辽宁师范大学海华学院 '}],
                    [{id:2, name:'辽宁师范大学海华学院 '},{id:1, name:'哈尔滨工程大学继教院 '}]
                  ],
                  qj:'./static/image/home/m5.png'
                },
                {
                  name:'<span class="red">网络安全2</span>专业',
                  intro:'互联网普及率达64.5%。与此同时，互联网的开放性和安全漏洞带来的风险截至2020年3月，我国网民规模为9.04亿，也无处不在。网络攻击行为日趋复杂；黑客攻击行为组织性更强；针对手机无线终端的网络攻击日趋严重.... ',
                  school:[
                    [{id:2, name:'辽宁师范大学海华学院 '},{id:1, name:'哈尔滨工程大学继教院 '}],
                    [{id:1, name:'哈尔滨工程大学继教院 '},{id:2, name:'辽宁师范大学海华学院 '}]
                  ],
                  qj:'./static/image/home/m5.png'
                },
                {
                  name:'<span class="red">网络安全3</span>专业',
                  intro:'互联网的开放性和安全漏洞带来的风险截至2020年3月，互联网普及率达64.5%。与此同时，我国网民规模为9.04亿，也无处不在。网络攻击行为日趋复杂；黑客攻击行为组织性更强；针对手机无线终端的网络攻击日趋严重.... ',
                  school:[
                    [{id:2, name:'辽宁师范大学海华学院 '},{id:1, name:'哈尔滨工程大学继教院 '}],
                    [{id:1, name:'哈尔滨工程大学继教院 '},{id:2, name:'辽宁师范大学海华学院 '}]
                  ],
                  qj:'./static/image/home/m5.png'
                }
              ]
            }
          ]
        },
        getMain2(){
          this.m2 = [
            {id:1, intro:'工业机器人专业，国务院发文支持'},
            {id:2, intro:'互联网金融专业，人才缺口达百万'},
            {id:3, intro:'网络安全专业，高薪就业'},
          ]
        },
        getMain3(){
          this.m3 = [
            {
              name:'特色',
              intro:'热门高薪专业 选择比等待更重要',
              tip:'特色专业院校',
              image:'./static/image/home/m3-ico1.png',
              list:[
                {name:'大连外国语大学国际教育学院',intro:'信息安全、影视后期制作、日语、航空高铁服务'},
                {name:'中原工学院继续教育学院',intro:'工业智能机器人、网络与新媒体、网络空间安全'},
                {name:'山东交通学院继续教育学院',intro:'计算机网络与多媒体，校企合作，一体化办学'},
                {name:'浙江海洋大学继续教育学院',intro:'工业机器人、互联网金融、新媒体运营，校企合作'},
                {name:'北京工商大学嘉华学院继续教育学院',intro:'软件工程、艺术设计、教育学、电子商务'},
                {name:'哈尔滨工程大学继续教育学院',intro:'互联网金融、工业机器人技术，高技术技能培养'},
              ]
            },
            {
              name:'各省',
              intro:'毕业证/技术/就业同时拥有',
              tip:'各省院校推荐',
              image:'./static/image/home/m3-ico2.png',
              list:[
                {name:'中原工学院继续教育学院',intro:'工业智能机器人、网络与新媒体、网络空间安全'},
                {name:'山东交通学院继续教育学院',intro:'计算机网络与多媒体，校企合作，一体化办学'},
                {name:'大连外国语大学国际教育学院',intro:'信息安全、影视后期制作、日语、航空高铁服务'},
                {name:'浙江海洋大学继续教育学院',intro:'工业机器人、互联网金融、新媒体运营，校企合作'},
                {name:'北京工商大学嘉华学院继续教育学院',intro:'软件工程、艺术设计、教育学、电子商务'},
                {name:'广东外语外贸大学高等继教院',intro:'国际软件工程、人工智能工程、工业机器人'},
              ]
            }
          ]
        },
        getMain4(){
          this.m4 = [
            {
              name:'初中生毕业专区',
              intro:'工作更早，晋升空<br>间更大',
              image:'./static/image/home/m4-ico1.png'
            },
            {
              name:'高中生专区',
              intro:'放宽分数，进入重点<br>本科大学学习',
              image:'./static/image/home/m4-ico2.png'
            },
            {
              name:'职业教育单招专区',
              intro:'低分捷径，避开高<br>考上本科',
              image:'./static/image/home/m4-ico3.png'
            },
            {
              name:'艺术专区',
              intro:'门槛低名师指导，推荐<br>就业',
              image:'./static/image/home/m4-ico4.png'
            },
            {
              name:'短期培训专区',
              intro:'3-6个月，推荐国内大厂<br>就业',
              image:'./static/image/home/m4-ico5.png'
            }
          ]
        },
        m4_ban(e){
          this.m4_cur = e+1;
        }
      }
    })
  </script>
</body>
</html>